import React, { useState, useEffect } from 'react';
import { Table, message } from 'antd';
import axios from '../utils/axios';
import { API } from '../api';

interface RequestHistory {
  id: number;
  url: string;
  method: string;
  responseStatus: number;
  createdAt: string;
}

const RequestHistory: React.FC = () => {
  const [history, setHistory] = useState<RequestHistory[]>([]);
  const [loading, setLoading] = useState(false);

  const fetchHistory = async () => {
    try {
      setLoading(true);
      const response = await axios.get(API.httpRequest.history);
      setHistory(response.data.content);
    } catch (error) {
      message.error('获取请求历史失败');
    } finally {
      setLoading(false);
    }
  };

  const fetchGroupHistory = async (id: number) => {
    try {
      setLoading(true);
      const response = await axios.get(API.requestHistory.group(id));
      setHistory(response.data);
    } catch (error) {
      message.error('获取组历史失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchHistory();
  }, []);

  const columns = [
    {
      title: 'URL',
      dataIndex: 'url',
      key: 'url',
    },
    {
      title: '方法',
      dataIndex: 'method',
      key: 'method',
    },
    {
      title: '状态码',
      dataIndex: 'responseStatus',
      key: 'responseStatus',
    },
    {
      title: '请求时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: (text: string) => new Date(text).toLocaleString(),
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Table
        columns={columns}
        dataSource={history}
        rowKey="id"
        loading={loading}
      />
    </div>
  );
};

export default RequestHistory; 